.gen {
    position: absolute;
    @include common-dropdown;
    padding: $base-spacing;
    width: 11em;
    &__length-range {
    }
    &__top-btn {
        float: right;
        cursor: pointer;
        position: relative;
        & ~ .gen__top-btn {
            margin-right: 0.5em;
        }
        color: var(--muted-color);
        &:hover {
            color: var(--text-color);
        }
    }
    &__sel-tpl {
        width: 100%;
        height: 2em;
        margin-top: $base-padding-v;
    }
    &__check {
        width: 40%;
        display: inline-block;
        &:nth-child(even) {
            margin-left: 15%;
        }
    }
    &__result {
        user-select: text;
        font-family: $monospace-font-family;
        margin-top: 6px;
        margin-bottom: 3px;
        height: 50px;
        text-align: center;
        white-space: pre-wrap;
        word-break: break-all;
        overflow: hidden;
        &--long-pass {
            font-size: 0.75em;
        }
    }
    &__check-hide {
        &-label {
            text-align: center;
            position: relative;
            top: -2px;
        }
        & + label.gen__check-hide-label:before {
            @include fa-icon;
            content: $fa-var-eye;
            color: inherit;
        }
        &:checked + label.gen__check-hide-label:before {
            content: $fa-var-eye-slash;
            color: inherit;
        }
        &:not([disabled]) + label.gen__check-hide-label:hover:before {
            color: var(--text-color);
        }
    }
    &__btn-wrap {
        text-align: center;
    }
}

@-moz-document url-prefix() {
    .gen__result {
        white-space: pre-wrap;
        word-break: break-all;
    }
}
